<!DOCTYPE html>
<html lang="en">
<head>
<title>StoryMapJS: autoload example</title>
<link rel="stylesheet" href="//cdn.knightlab.com/libs/storymapjs/latest/css/storymap.css">
<script type="text/javascript" src="//cdn.knightlab.com/libs/storymapjs/latest/js/storymap-min.js"></script>
<script type="text/javascript" src="//cdn.knightlab.com/libs/storymapjs/latest/js/json2.min.js"></script>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="storymap-embed"></div>


<script type="text/javascript">

function parseQuerystring() {
    var nvpair = {};
    var qs = window.location.search.replace('?', '');
    var pairs = qs.split('&');

    for(var i = 0; i < pairs.length; i++) {
        var p = pairs[i].split('=');
        nvpair[p[0]] = p[1];
    }
    return nvpair;
}

function getScriptPath(scriptname) {
    var scriptTags = document.getElementsByTagName('script');

    for(var i = 0; i < scriptTags.length; i++) {
        if(scriptTags[i].src.match(scriptname)) {
            script_path = scriptTags[i].src;
            return script_path.split('?')[0].split('/').slice(0, -1).join('/');
        }
    }
    return '';
}

function url_join(url, concat) { // see http://stackoverflow.com/questions/2676178/joining-relative-urls
    function build(parts,container) {
        for (var i = 0, l = parts.length; i < l; i ++) {
            if (parts[i] == '..') {
                container.pop();
            } else if (parts[i] == '.') {
                continue;
            } else {
                container.push(parts[i]);
            }
        }
    }
    var url_parts = [ ];
    build(url.split('/'),url_parts);
    build(concat.split('/'),url_parts);
    return url_parts.join('/');
}


var storymap = null;
var storymap_url = 'https://uploads.knightlab.com/storymapjs/a1a349b51799ee49e96bed10cc235e7f/aryas-journey/published.json';

var options = {
    script_path: getScriptPath(/storymap(-min)?\.js/),
    start_at_slide: 0
};

/**
 * Most of this page is replicated from the standard embed HTML which can be
 * retrieved from the share link of a StoryMap.
 *
 * This function is the primary change from the standard embed in order to
 * enable autoloading of map slides. Pass this function to setInterval with
 * a milliseconds value at the end of the storymap_onload function below.
 */
const loadNextSlide =  function() {
    if ((storymap.current_slide + 1) < (storymap.data.slides.length)) {
        storymap.goTo(storymap.current_slide + 1);
    } else {
        storymap.goTo(0);
    }
}

function storymap_onload(d) {
    trace('embed: storymap data loaded');

    if (d && d.storymap) {
        var font = "stock:default";
        if(d.font_css) {
            font = d.font_css;
        }
        if(font.indexOf("stock:") == 0) {
            var font_name = font.split(':')[1];
            var base_url = url_join(options.script_path,"../css/fonts");
            font = url_join(base_url, "font." + font_name + ".css");
        } else if(!font.match('^(http|https|//)')) {
            font = url_join(options.script_path, font);
        }
        VCO.Load.css(font,function(){ trace('font loaded: ' + font);});
        storymap = new VCO.StoryMap('storymap-embed', d, options);
        setInterval(loadNextSlide, 5000);
    }
}

function storymap_getjson() {
    if('withCredentials' in new XMLHttpRequest()) {
        // Supports cross-domain requests
        trace('embed: loading data via XMLHttpRequest');
        VCO.getJSON(storymap_url, storymap_onload);
    } else if(typeof XDomainRequest !== "undefined") {
        // Use IE-specific "CORS" code with XDR
        trace('embed: loading data via XDomainRequest');
        var xdr = new XDomainRequest();
        xdr.onload = function() {
            storymap_onload(JSON.parse(xdr.responseText));
        };
        xdr.onerror = function() {
            trace('embed: error loading data via XDomainRequest');
        };
        xdr.onprogress = function() {};
        xdr.open("get", storymap_url);
        xdr.send();
    }
}


window.onload = function() {
    if(storymap_url.match('\\.js$')) {
        trace('embed: loading data via script injection');
        var loaded = false;
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src  = storymap_url;
        script.onload = script.onreadystatechange = function() {
            if(!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                loaded = true;
                storymap_onload(storymap_json);
            }
        }
        // document.head not standard before HTML5
        var insertionPoint = document.head || document.getElementsByTagName('head').item(0) || document.documentElement.childNodes[0];
        insertionPoint.appendChild(script);
    } else {
        storymap_getjson();
    }
}

window.onresize = function(event) {
    if(storymap) {
        storymap.updateDisplay();
    }
}
</script>
</body>
</html>
